{% extends 'base/base.html' %}
{% load static %}

{% block Title %}
搜索结果
{% endblock %}

{% block css %}
<link rel="stylesheet" href="{% static 'css/list-styles.css' %}">
{% endblock %}

{% block main %}
<div class="list-container">
    <div class="list-card">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>🔍 搜索结果</h1>
            {% if query %}
                <p>搜索关键词："{{ query }}"</p>
            {% else %}
                <p>请输入搜索关键词</p>
            {% endif %}
        </div>

        <!-- 搜索结果区域 -->
        <div class="music-list-area">
            {% if query %}
                <div class="search-results">
                    {% for result in page.object_list %}
                        <div class="result-item">
                            <div class="result-content">
                                <h4 class="result-title">
                                    <a href="{% url 'main:details' result.object.id %}">{{ result.object.Title }}</a>
                                </h4>
                                <p class="result-artist">🎵 {{ result.object.author }}</p>
                                <div class="result-meta">
                                    <span class="result-type">音乐</span>
                                    <span class="result-score">相关度: {{ result.score|floatformat:2 }}</span>
                                </div>
                            </div>
                            <div class="result-action">
                                <a href="{% url 'main:details' result.object.id %}" class="play-btn">播放</a>
                            </div>
                        </div>
                    {% empty %}
                        <div class="empty-state">
                            <h3>🔍 没有找到相关音乐</h3>
                            <p>试试其他关键词吧~</p>
                            <div style="margin-top: 20px;">
                                <a href="{% url 'main:index' %}" class="back-button">🏠 返回首页</a>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <!-- 分页 -->
                {% if page.has_previous or page.has_next %}
                <div class="pagination">
                    {% if page.has_previous %}
                        <a href="?q={{ query }}&page={{ page.previous_page_number }}">上一页</a>
                    {% else %}
                        <span>上一页</span>
                    {% endif %}

                    <span>第{{ page.number }}页/共{{ page.paginator.num_pages }}页</span>

                    {% if page.has_next %}
                        <a href="?q={{ query }}&page={{ page.next_page_number }}">下一页</a>
                    {% else %}
                        <span>下一页</span>
                    {% endif %}
                </div>
                {% endif %}
            {% else %}
                <div class="empty-state">
                    <h3>🔍 请输入搜索关键词</h3>
                    <p>在搜索框中输入歌曲名称或艺术家名称</p>
                    <div style="margin-top: 20px;">
                        <a href="{% url 'main:index' %}" class="back-button">🏠 返回首页</a>
                    </div>
                </div>
            {% endif %}
        </div>

        <!-- 返回按钮 -->
        <div style="text-align: center; margin-top: 30px;">
            <a href="{% url 'main:index' %}" class="back-button">🏠 返回首页</a>
        </div>
    </div>
</div>
{% endblock %}

